<template>
  <div class="monitor-page">
    <!-- 系统状态概览 -->
    <div class="status-overview">
      <el-row :gutter="24">
        <el-col :span="6" v-for="(status, index) in systemOverview" :key="index">
          <el-card class="status-card" :class="`status-${status.status}`" @click="handleStatusClick(status)">
            <div class="status-content">
              <div class="status-icon">
                <div class="icon-wrapper" :style="{ background: status.gradient }">
                  <el-icon :size="32" :color="status.iconColor">
                    <component :is="status.icon" />
                  </el-icon>
                </div>
                <div class="status-indicator" :class="status.status"></div>
              </div>
              <div class="status-info">
                <div class="status-title">{{ status.title }}</div>
                <div class="status-value">{{ status.value }}</div>
                <div class="status-description">{{ status.description }}</div>
              </div>
            </div>
            <div class="status-trend">
              <div class="trend-chart">
                <div 
                  v-for="(point, i) in status.trend" 
                  :key="i"
                  class="trend-bar"
                  :style="{ 
                    height: point + '%', 
                    background: status.color,
                    animationDelay: i * 100 + 'ms'
                  }"
                ></div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 监控仪表板 -->
    <el-row :gutter="24" class="dashboard-section">
      <!-- 系统性能监控 -->
      <el-col :span="12">
        <el-card class="performance-card">
          <template #header>
            <div class="card-header">
              <div class="header-left">
                <h3 class="card-title">系统性能</h3>
                <p class="card-subtitle">实时监控系统资源使用情况</p>
              </div>
              <div class="header-right">
                <el-tag :type="performanceStatus.type" size="small">
                  <el-icon size="12"><component :is="performanceStatus.icon" /></el-icon>
                  {{ performanceStatus.text }}
                </el-tag>
                <el-button size="small" :icon="Refresh" @click="refreshPerformance" circle />
              </div>
            </div>
          </template>
          
          <!-- 性能指标 -->
          <div class="performance-metrics">
            <div v-for="metric in performanceMetrics" :key="metric.name" class="metric-item">
              <div class="metric-header">
                <span class="metric-name">{{ metric.name }}</span>
                <span class="metric-value">{{ metric.value }}%</span>
              </div>
              <div class="metric-progress">
                <div class="progress-track">
                  <div 
                    class="progress-fill" 
                    :style="{ 
                      width: metric.value + '%', 
                      background: getProgressColor(metric.value),
                      boxShadow: `0 0 10px ${getProgressColor(metric.value)}40`
                    }"
                  ></div>
                </div>
              </div>
              <div class="metric-details">
                <span class="metric-info">{{ metric.details }}</span>
                <span class="metric-trend" :class="metric.trendType">
                  <el-icon size="10">
                    <component :is="metric.trendType === 'up' ? 'ArrowUp' : 'ArrowDown'" />
                  </el-icon>
                  {{ metric.trend }}
                </span>
              </div>
            </div>
          </div>

          <!-- 实时图表 -->
          <div class="realtime-chart">
            <v-chart 
              class="performance-chart" 
              :option="performanceChartOption" 
              autoresize
            />
          </div>
        </el-card>
      </el-col>

      <!-- 网络监控 -->
      <el-col :span="12">
        <el-card class="network-card">
          <template #header>
            <div class="card-header">
              <div class="header-left">
                <h3 class="card-title">网络监控</h3>
                <p class="card-subtitle">网络流量与连接状态</p>
              </div>
              <div class="header-right">
                <el-switch 
                  v-model="networkMonitorEnabled" 
                  size="small"
                  active-text="启用"
                  inactive-text="禁用"
                />
              </div>
            </div>
          </template>

          <!-- 网络统计 -->
          <div class="network-stats">
            <el-row :gutter="16">
              <el-col :span="8" v-for="stat in networkStats" :key="stat.label">
                <div class="stat-item">
                  <div class="stat-icon" :style="{ color: stat.color }">
                    <el-icon :size="20">
                      <component :is="stat.icon" />
                    </el-icon>
                  </div>
                  <div class="stat-content">
                    <div class="stat-value">{{ stat.value }}</div>
                    <div class="stat-label">{{ stat.label }}</div>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>

          <!-- 网络图表 -->
          <div class="network-chart">
            <v-chart 
              class="traffic-chart" 
              :option="networkChartOption" 
              autoresize
            />
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 告警与日志 -->
    <el-row :gutter="24" class="alerts-section">
      <!-- 告警中心 -->
      <el-col :span="16">
        <el-card class="alerts-card">
          <template #header>
            <div class="card-header">
              <div class="header-left">
                <h3 class="card-title">告警中心</h3>
                <el-badge :value="unreadAlerts" class="alert-badge">
                  <el-icon size="16"><Bell /></el-icon>
                </el-badge>
              </div>
              <div class="header-right">
                <el-button-group class="filter-buttons">
                  <el-button 
                    v-for="filter in alertFilters" 
                    :key="filter.value"
                    :type="selectedAlertFilter === filter.value ? 'primary' : ''"
                    size="small"
                    @click="changeAlertFilter(filter.value)"
                  >
                    {{ filter.label }}
                  </el-button>
                </el-button-group>
                <el-button size="small" :icon="Setting" @click="openAlertSettings" circle />
              </div>
            </div>
          </template>

          <div class="alerts-content">
            <div class="alerts-summary">
              <el-row :gutter="16">
                <el-col :span="8" v-for="summary in alertSummary" :key="summary.type">
                  <div class="summary-item" :class="summary.type">
                    <div class="summary-count">{{ summary.count }}</div>
                    <div class="summary-label">{{ summary.label }}</div>
                  </div>
                </el-col>
              </el-row>
            </div>

            <div class="alerts-list">
              <div 
                v-for="alert in filteredAlerts" 
                :key="alert.id"
                class="alert-item" 
                :class="[alert.level, { unread: !alert.read }]"
                @click="handleAlertClick(alert)"
              >
                <div class="alert-icon">
                  <el-icon :size="16">
                    <component :is="getAlertIcon(alert.level)" />
                  </el-icon>
                </div>
                <div class="alert-content">
                  <div class="alert-title">{{ alert.title }}</div>
                  <div class="alert-message">{{ alert.message }}</div>
                  <div class="alert-meta">
                    <span class="alert-time">{{ formatTime(alert.time) }}</span>
                    <span class="alert-source">{{ alert.source }}</span>
                  </div>
                </div>
                <div class="alert-actions">
                  <el-button size="small" text @click.stop="acknowledgeAlert(alert)">
                    确认
                  </el-button>
                  <el-button size="small" text @click.stop="dismissAlert(alert)">
                    忽略
                  </el-button>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 服务状态 -->
      <el-col :span="8">
        <el-card class="services-card">
          <template #header>
            <div class="card-header">
              <div class="header-left">
                <h3 class="card-title">服务状态</h3>
                <p class="card-subtitle">{{ runningServices }}/{{ totalServices }} 运行中</p>
              </div>
              <div class="header-right">
                <el-button size="small" :icon="Operation" @click="manageServices">
                  管理
                </el-button>
              </div>
            </div>
          </template>

          <div class="services-list">
            <div 
              v-for="service in services" 
              :key="service.name"
              class="service-item"
              @click="handleServiceClick(service)"
            >
              <div class="service-info">
                <div class="service-status" :class="service.status">
                  <div class="status-dot"></div>
                </div>
                <div class="service-details">
                  <div class="service-name">{{ service.name }}</div>
                  <div class="service-description">{{ service.description }}</div>
                </div>
              </div>
              <div class="service-metrics">
                <div class="metric-item">
                  <span class="metric-label">CPU</span>
                  <span class="metric-value">{{ service.cpu }}%</span>
                </div>
                <div class="metric-item">
                  <span class="metric-label">内存</span>
                  <span class="metric-value">{{ service.memory }}MB</span>
                </div>
              </div>
              <div class="service-actions">
                <el-dropdown trigger="click" @command="(command) => handleServiceAction(service, command)">
                  <el-button size="small" :icon="MoreFilled" circle />
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item command="restart">重启</el-dropdown-item>
                      <el-dropdown-item command="stop">停止</el-dropdown-item>
                      <el-dropdown-item command="logs">查看日志</el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 系统信息 -->
    <el-row :gutter="24" class="system-info-section">
      <el-col :span="24">
        <el-card class="system-info-card">
          <template #header>
            <div class="card-header">
              <div class="header-left">
                <h3 class="card-title">系统信息</h3>
                <p class="card-subtitle">详细的系统配置和运行时信息</p>
              </div>
              <div class="header-right">
                <el-button size="small" :icon="CopyDocument" @click="copySystemInfo">
                  复制信息
                </el-button>
                <el-button size="small" :icon="Download" @click="exportSystemInfo">
                  导出报告
                </el-button>
              </div>
            </div>
          </template>

          <div class="system-info-content">
            <el-row :gutter="24">
              <el-col :span="8" v-for="(category, categoryName) in systemInfo" :key="categoryName">
                <div class="info-category">
                  <h4 class="category-title">{{ categoryName }}</h4>
                  <div class="info-items">
                    <div v-for="(value, key) in category" :key="key" class="info-item">
                      <span class="info-label">{{ key }}</span>
                      <span class="info-value">{{ value }}</span>
                    </div>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted, onUnmounted } from 'vue'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart, GaugeChart } from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
} from 'echarts/components'
import VChart from 'vue-echarts'
import { 
  Monitor,
  Cpu,
  Document,
  Folder,
  Share,
  Warning,
  SuccessFilled,
  CircleClose,
  InfoFilled,
  ArrowUp,
  ArrowDown,
  Refresh,
  Bell,
  Setting,
  Operation,
  MoreFilled,
  CopyDocument,
  Download,
  VideoPlay,
  Link
} from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 注册 ECharts 组件
use([
  CanvasRenderer,
  LineChart,
  GaugeChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
])

// 响应式数据
const networkMonitorEnabled = ref(true)
const selectedAlertFilter = ref('all')
const unreadAlerts = ref(5)

// 系统状态概览
const systemOverview = reactive([
  {
    title: 'CPU',
    value: '45.2%',
    description: '处理器使用率',
    status: 'normal',
    color: '#409eff',
    iconColor: '#fff',
    icon: 'Cpu',
    gradient: 'linear-gradient(135deg, #409eff, #66b1ff)',
    trend: [30, 35, 40, 45, 42, 48, 45, 47]
  },
  {
    title: '内存',
    value: '68.7%',
    description: '内存使用率',
    status: 'warning',
    color: '#e6a23c',
    iconColor: '#fff',
    icon: 'Document',
    gradient: 'linear-gradient(135deg, #e6a23c, #f0c78a)',
    trend: [55, 60, 65, 68, 70, 67, 69, 68]
  },
  {
    title: '磁盘',
    value: '23.4%',
    description: '磁盘使用率',
    status: 'good',
    color: '#67c23a',
    iconColor: '#fff',
    icon: 'Folder',
    gradient: 'linear-gradient(135deg, #67c23a, #85ce61)',
    trend: [20, 22, 21, 23, 24, 22, 23, 24]
  },
  {
    title: '网络',
    value: '正常',
    description: '网络连接状态',
    status: 'good',
    color: '#67c23a',
    iconColor: '#fff',
    icon: 'Share',
    gradient: 'linear-gradient(135deg, #67c23a, #85ce61)',
    trend: [90, 95, 92, 98, 95, 97, 96, 95]
  }
])

// 性能状态
const performanceStatus = computed(() => {
  const cpuUsage = 45.2
  const memoryUsage = 68.7
  
  if (memoryUsage > 80 || cpuUsage > 80) {
    return { type: 'danger', text: '高负载', icon: 'Warning' }
  } else if (memoryUsage > 60 || cpuUsage > 60) {
    return { type: 'warning', text: '中等负载', icon: 'InfoFilled' }
  } else {
    return { type: 'success', text: '运行正常', icon: 'SuccessFilled' }
  }
})

// 性能指标
const performanceMetrics = reactive([
  {
    name: 'CPU使用率',
    value: 45,
    details: '8核心 @ 3.2GHz',
    trend: '+2.1%',
    trendType: 'up'
  },
  {
    name: '内存使用',
    value: 68,
    details: '10.9GB / 16GB',
    trend: '+1.5%',
    trendType: 'up'
  },
  {
    name: '磁盘I/O',
    value: 23,
    details: '读: 45MB/s 写: 12MB/s',
    trend: '-0.8%',
    trendType: 'down'
  },
  {
    name: '网络带宽',
    value: 12,
    details: '上传: 2.3MB/s 下载: 15.6MB/s',
    trend: '+5.2%',
    trendType: 'up'
  }
])

// 性能图表配置
const performanceChartOption = ref({
  backgroundColor: 'transparent',
  tooltip: {
    trigger: 'axis',
    backgroundColor: 'rgba(255, 255, 255, 0.95)',
    borderColor: '#e4e7ed',
    borderWidth: 1
  },
  legend: {
    data: ['CPU', '内存', '磁盘I/O'],
    top: 10,
    textStyle: { color: '#666' }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    top: '15%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: ['00:00', '00:05', '00:10', '00:15', '00:20', '00:25', '00:30'],
    axisLabel: { color: '#666' }
  },
  yAxis: {
    type: 'value',
    max: 100,
    axisLabel: { 
      color: '#666',
      formatter: '{value}%'
    }
  },
  series: [
    {
      name: 'CPU',
      type: 'line',
      data: [42, 45, 43, 48, 45, 47, 45],
      smooth: true,
      lineStyle: { color: '#409eff', width: 2 },
      itemStyle: { color: '#409eff' },
      areaStyle: {
        color: {
          type: 'linear',
          x: 0, y: 0, x2: 0, y2: 1,
          colorStops: [
            { offset: 0, color: 'rgba(64, 158, 255, 0.3)' },
            { offset: 1, color: 'rgba(64, 158, 255, 0.1)' }
          ]
        }
      }
    },
    {
      name: '内存',
      type: 'line',
      data: [65, 68, 66, 70, 67, 69, 68],
      smooth: true,
      lineStyle: { color: '#e6a23c', width: 2 },
      itemStyle: { color: '#e6a23c' }
    },
    {
      name: '磁盘I/O',
      type: 'line',
      data: [20, 23, 21, 25, 22, 24, 23],
      smooth: true,
      lineStyle: { color: '#67c23a', width: 2 },
      itemStyle: { color: '#67c23a' }
    }
  ]
})

// 网络统计
const networkStats = reactive([
  {
    label: '上传速度',
    value: '2.3MB/s',
    icon: 'ArrowUp',
    color: '#67c23a'
  },
  {
    label: '下载速度',
    value: '15.6MB/s',
    icon: 'ArrowDown',
    color: '#409eff'
  },
  {
    label: '连接数',
    value: '1,248',
    icon: 'Link',
    color: '#e6a23c'
  }
])

// 网络图表配置
const networkChartOption = ref({
  backgroundColor: 'transparent',
  tooltip: {
    trigger: 'axis',
    backgroundColor: 'rgba(255, 255, 255, 0.95)',
    borderColor: '#e4e7ed',
    borderWidth: 1
  },
  legend: {
    data: ['上传', '下载'],
    top: 10,
    textStyle: { color: '#666' }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    top: '15%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: ['00:00', '00:05', '00:10', '00:15', '00:20', '00:25', '00:30'],
    axisLabel: { color: '#666' }
  },
  yAxis: {
    type: 'value',
    axisLabel: { 
      color: '#666',
      formatter: '{value}MB/s'
    }
  },
  series: [
    {
      name: '上传',
      type: 'line',
      data: [1.8, 2.1, 2.3, 2.0, 2.5, 2.3, 2.2],
      smooth: true,
      lineStyle: { color: '#67c23a', width: 2 },
      itemStyle: { color: '#67c23a' },
      areaStyle: {
        color: {
          type: 'linear',
          x: 0, y: 0, x2: 0, y2: 1,
          colorStops: [
            { offset: 0, color: 'rgba(103, 194, 58, 0.3)' },
            { offset: 1, color: 'rgba(103, 194, 58, 0.1)' }
          ]
        }
      }
    },
    {
      name: '下载',
      type: 'line',
      data: [12.5, 15.2, 14.8, 16.1, 15.6, 14.9, 15.3],
      smooth: true,
      lineStyle: { color: '#409eff', width: 2 },
      itemStyle: { color: '#409eff' },
      areaStyle: {
        color: {
          type: 'linear',
          x: 0, y: 0, x2: 0, y2: 1,
          colorStops: [
            { offset: 0, color: 'rgba(64, 158, 255, 0.3)' },
            { offset: 1, color: 'rgba(64, 158, 255, 0.1)' }
          ]
        }
      }
    }
  ]
})

// 告警过滤器
const alertFilters = [
  { label: '全部', value: 'all' },
  { label: '严重', value: 'critical' },
  { label: '警告', value: 'warning' },
  { label: '信息', value: 'info' }
]

// 告警摘要
const alertSummary = reactive([
  { type: 'critical', label: '严重告警', count: 2 },
  { type: 'warning', label: '警告', count: 8 },
  { type: 'info', label: '信息', count: 15 }
])

// 告警列表
const alerts = reactive([
  {
    id: 1,
    level: 'critical',
    title: 'CPU使用率过高',
    message: 'CPU使用率已达到85%，建议检查系统负载',
    time: new Date(Date.now() - 5 * 60000),
    source: '系统监控',
    read: false
  },
  {
    id: 2,
    level: 'warning',
    title: '内存使用率警告',
    message: '内存使用率超过70%阈值',
    time: new Date(Date.now() - 15 * 60000),
    source: '系统监控',
    read: false
  },
  {
    id: 3,
    level: 'info',
    title: '系统重启完成',
    message: '系统已成功重启，所有服务正常运行',
    time: new Date(Date.now() - 30 * 60000),
    source: '系统日志',
    read: true
  }
])

// 过滤后的告警
const filteredAlerts = computed(() => {
  if (selectedAlertFilter.value === 'all') return alerts
  return alerts.filter(alert => alert.level === selectedAlertFilter.value)
})

// 服务列表
const services = reactive([
  {
    name: 'Web服务器',
    description: 'Nginx Web Server',
    status: 'running',
    cpu: 12,
    memory: 256
  },
  {
    name: '数据库',
    description: 'MySQL Database',
    status: 'running',
    cpu: 25,
    memory: 1024
  },
  {
    name: 'Redis缓存',
    description: 'Redis Cache Server',
    status: 'running',
    cpu: 8,
    memory: 128
  },
  {
    name: '消息队列',
    description: 'RabbitMQ Message Queue',
    status: 'stopped',
    cpu: 0,
    memory: 0
  }
])

// 运行中的服务数量
const runningServices = computed(() => {
  return services.filter(service => service.status === 'running').length
})

const totalServices = computed(() => services.length)

// 系统信息
const systemInfo = reactive({
  '系统信息': {
    '操作系统': 'Linux Ubuntu 20.04 LTS',
    '内核版本': '5.15.0-58-generic',
    '架构': 'x86_64',
    '启动时间': '2 days, 14:32:15'
  },
  '硬件信息': {
    'CPU': 'Intel Core i7-9700K @ 3.60GHz',
    '内存': '16GB DDR4 3200MHz',
    '磁盘': '1TB NVMe SSD',
    '网卡': 'Realtek RTL8111/8168/8411'
  },
  '运行环境': {
    'Node.js': 'v18.17.0',
    'NPM': 'v9.6.7',
    'PM2': 'v5.3.0',
    'Docker': 'v24.0.2'
  }
})

// 方法
const handleStatusClick = (status) => {
  ElMessage.info(`查看 ${status.title} 详细信息`)
}

const refreshPerformance = () => {
  ElMessage.success('性能数据已刷新')
  // 模拟数据更新
  performanceMetrics.forEach(metric => {
    metric.value = Math.floor(Math.random() * 100)
  })
}

const getProgressColor = (value) => {
  if (value >= 80) return '#f56c6c'
  if (value >= 60) return '#e6a23c'
  return '#67c23a'
}

const changeAlertFilter = (filter) => {
  selectedAlertFilter.value = filter
}

const handleAlertClick = (alert) => {
  ElMessage.info(`查看告警详情: ${alert.title}`)
}

const acknowledgeAlert = (alert) => {
  alert.read = true
  ElMessage.success('告警已确认')
}

const dismissAlert = (alert) => {
  const index = alerts.indexOf(alert)
  if (index > -1) {
    alerts.splice(index, 1)
    ElMessage.success('告警已忽略')
  }
}

const getAlertIcon = (level) => {
  switch (level) {
    case 'critical':
      return 'CircleClose'
    case 'warning':
      return 'Warning'
    case 'info':
      return 'InfoFilled'
    default:
      return 'InfoFilled'
  }
}

const formatTime = (time) => {
  const now = new Date()
  const diff = now - time
  const minutes = Math.floor(diff / 60000)
  if (minutes < 60) return `${minutes}分钟前`
  const hours = Math.floor(minutes / 60)
  if (hours < 24) return `${hours}小时前`
  const days = Math.floor(hours / 24)
  return `${days}天前`
}

const openAlertSettings = () => {
  ElMessage.info('打开告警设置')
}

const handleServiceClick = (service) => {
  ElMessage.info(`查看服务详情: ${service.name}`)
}

const handleServiceAction = (service, action) => {
  ElMessage.success(`${action} ${service.name}`)
}

const manageServices = () => {
  ElMessage.info('打开服务管理')
}

const copySystemInfo = async () => {
  try {
    const info = JSON.stringify(systemInfo, null, 2)
    await navigator.clipboard.writeText(info)
    ElMessage.success('系统信息已复制到剪贴板')
  } catch (err) {
    ElMessage.error('复制失败')
  }
}

const exportSystemInfo = () => {
  ElMessage.success('系统信息报告已导出')
}

// 生命周期
let updateTimer = null

onMounted(() => {
  // 模拟实时数据更新
  updateTimer = setInterval(() => {
    // 更新系统状态
    systemOverview.forEach(status => {
      if (status.title === 'CPU') {
        const newValue = Math.random() * 30 + 30 // 30-60%
        status.value = newValue.toFixed(1) + '%'
        status.trend.shift()
        status.trend.push(Math.floor(newValue))
      } else if (status.title === '内存') {
        const newValue = Math.random() * 20 + 60 // 60-80%
        status.value = newValue.toFixed(1) + '%'
        status.trend.shift()
        status.trend.push(Math.floor(newValue))
      }
    })

    // 更新性能指标
    performanceMetrics[0].value = Math.floor(Math.random() * 30 + 30)
    performanceMetrics[1].value = Math.floor(Math.random() * 20 + 60)

    // 更新图表数据
    const currentTime = new Date().toLocaleTimeString('zh-CN', { 
      hour: '2-digit', 
      minute: '2-digit' 
    })
    
    // 性能图表数据更新
    performanceChartOption.value.xAxis.data.shift()
    performanceChartOption.value.xAxis.data.push(currentTime)
    
    performanceChartOption.value.series.forEach(series => {
      series.data.shift()
      series.data.push(Math.floor(Math.random() * 50 + 20))
    })

    // 网络图表数据更新
    networkChartOption.value.xAxis.data.shift()
    networkChartOption.value.xAxis.data.push(currentTime)
    
    networkChartOption.value.series[0].data.shift()
    networkChartOption.value.series[0].data.push((Math.random() * 2 + 1).toFixed(1))
    
    networkChartOption.value.series[1].data.shift()
    networkChartOption.value.series[1].data.push((Math.random() * 10 + 10).toFixed(1))
  }, 5000)
})

onUnmounted(() => {
  if (updateTimer) {
    clearInterval(updateTimer)
  }
})
</script>

<style scoped>
.monitor-page {
  padding: 20px;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  min-height: calc(100vh - 60px);
  position: relative;
}

.monitor-page::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 25% 25%, rgba(64, 158, 255, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(103, 194, 58, 0.1) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

.monitor-page > * {
  position: relative;
  z-index: 1;
}

/* 状态概览 */
.status-overview {
  margin-bottom: 24px;
}

.status-card {
  border-radius: 16px;
  border: none;
  box-shadow: 
    0 8px 32px rgba(0,0,0,0.08),
    0 2px 8px rgba(0,0,0,0.04);
  background: linear-gradient(135deg, #fff 0%, #fafbfc 100%);
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  position: relative;
}

.status-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 
    0 16px 48px rgba(0,0,0,0.12),
    0 4px 16px rgba(0,0,0,0.08);
}

.status-content {
  display: flex;
  align-items: center;
  padding: 20px;
  gap: 16px;
}

.status-icon {
  position: relative;
  flex-shrink: 0;
}

.icon-wrapper {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.status-indicator {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #fff;
}

.status-indicator.good {
  background: #67c23a;
  box-shadow: 0 0 8px rgba(103, 194, 58, 0.5);
}

.status-indicator.warning {
  background: #e6a23c;
  box-shadow: 0 0 8px rgba(230, 162, 60, 0.5);
}

.status-indicator.normal {
  background: #409eff;
  box-shadow: 0 0 8px rgba(64, 158, 255, 0.5);
}

.status-indicator.critical {
  background: #f56c6c;
  box-shadow: 0 0 8px rgba(245, 108, 108, 0.5);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0.7; }
}

.status-info {
  flex: 1;
}

.status-title {
  font-size: 14px;
  color: #666;
  margin-bottom: 4px;
  font-weight: 500;
}

.status-value {
  font-size: 24px;
  font-weight: 800;
  color: #1a1a1a;
  margin-bottom: 2px;
}

.status-description {
  font-size: 12px;
  color: #999;
}

.status-trend {
  padding: 16px 20px 0;
}

.trend-chart {
  display: flex;
  align-items: end;
  gap: 2px;
  height: 24px;
}

.trend-bar {
  flex: 1;
  min-height: 2px;
  border-radius: 1px;
  opacity: 0.7;
  animation: trendGrow 0.6s ease-out;
}

@keyframes trendGrow {
  from { height: 0; }
}

/* 仪表板区域 */
.dashboard-section {
  margin-bottom: 24px;
}

.performance-card, .network-card {
  border-radius: 16px;
  border: none;
  box-shadow: 
    0 8px 32px rgba(0,0,0,0.08),
    0 2px 8px rgba(0,0,0,0.04);
  background: linear-gradient(135deg, #fff 0%, #fafbfc 100%);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-left {
  flex: 1;
}

.card-title {
  font-size: 18px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 4px 0;
}

.card-subtitle {
  font-size: 12px;
  color: #999;
  margin: 0;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* 性能指标 */
.performance-metrics {
  margin-bottom: 24px;
}

.metric-item {
  margin-bottom: 20px;
  padding: 16px;
  background: #f8f9fa;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.metric-item:hover {
  background: #e9ecef;
  transform: translateY(-1px);
}

.metric-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.metric-name {
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.metric-value {
  font-size: 16px;
  font-weight: 700;
  color: #1a1a1a;
}

.metric-progress {
  margin-bottom: 8px;
}

.progress-track {
  height: 8px;
  background: #e4e7ed;
  border-radius: 4px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  border-radius: 4px;
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
  animation: progressShine 2s ease-in-out infinite;
}

@keyframes progressShine {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.metric-details {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.metric-info {
  font-size: 12px;
  color: #666;
}

.metric-trend {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 8px;
}

.metric-trend.up {
  color: #67c23a;
  background: rgba(103, 194, 58, 0.1);
}

.metric-trend.down {
  color: #f56c6c;
  background: rgba(245, 108, 108, 0.1);
}

/* 实时图表 */
.realtime-chart {
  height: 200px;
  margin-top: 16px;
}

.performance-chart {
  height: 100% !important;
  width: 100% !important;
}

/* 网络监控 */
.network-stats {
  margin-bottom: 20px;
}

.stat-item {
  display: flex;
  align-items: center;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 8px;
  gap: 12px;
}

.stat-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 8px;
}

.stat-content {
  flex: 1;
}

.stat-value {
  font-size: 16px;
  font-weight: 700;
  color: #333;
  margin-bottom: 2px;
}

.stat-label {
  font-size: 12px;
  color: #666;
}

.network-chart {
  height: 180px;
}

.traffic-chart {
  height: 100% !important;
  width: 100% !important;
}

/* 告警区域 */
.alerts-section {
  margin-bottom: 24px;
}

.alerts-card, .services-card {
  border-radius: 16px;
  border: none;
  box-shadow: 
    0 8px 32px rgba(0,0,0,0.08),
    0 2px 8px rgba(0,0,0,0.04);
  background: linear-gradient(135deg, #fff 0%, #fafbfc 100%);
}

.alert-badge {
  margin-left: 8px;
}

.filter-buttons .el-button {
  border-radius: 12px;
  padding: 6px 12px;
  font-size: 12px;
}

.alerts-summary {
  margin-bottom: 20px;
}

.summary-item {
  text-align: center;
  padding: 16px;
  border-radius: 12px;
  background: #f8f9fa;
}

.summary-item.critical {
  border-left: 4px solid #f56c6c;
}

.summary-item.warning {
  border-left: 4px solid #e6a23c;
}

.summary-item.info {
  border-left: 4px solid #409eff;
}

.summary-count {
  font-size: 24px;
  font-weight: 800;
  color: #333;
  margin-bottom: 4px;
}

.summary-label {
  font-size: 12px;
  color: #666;
}

.alerts-list {
  max-height: 300px;
  overflow-y: auto;
}

.alert-item {
  display: flex;
  align-items: center;
  padding: 16px;
  border-radius: 12px;
  margin-bottom: 8px;
  background: #f8f9fa;
  cursor: pointer;
  transition: all 0.3s ease;
  gap: 12px;
}

.alert-item:hover {
  background: #e9ecef;
  transform: translateY(-1px);
}

.alert-item.unread {
  background: #fff;
  border: 1px solid #e4e7ed;
}

.alert-item.critical {
  border-left: 4px solid #f56c6c;
}

.alert-item.warning {
  border-left: 4px solid #e6a23c;
}

.alert-item.info {
  border-left: 4px solid #409eff;
}

.alert-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.8);
}

.alert-content {
  flex: 1;
}

.alert-title {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin-bottom: 4px;
}

.alert-message {
  font-size: 13px;
  color: #666;
  margin-bottom: 6px;
  line-height: 1.4;
}

.alert-meta {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: #999;
}

.alert-actions {
  display: flex;
  gap: 8px;
}

/* 服务状态 */
.services-list {
  max-height: 400px;
  overflow-y: auto;
}

.service-item {
  display: flex;
  align-items: center;
  padding: 16px;
  border-radius: 12px;
  margin-bottom: 8px;
  background: #f8f9fa;
  cursor: pointer;
  transition: all 0.3s ease;
  gap: 12px;
}

.service-item:hover {
  background: #e9ecef;
  transform: translateY(-1px);
}

.service-info {
  display: flex;
  align-items: center;
  flex: 1;
  gap: 12px;
}

.service-status {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.8);
  position: relative;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.service-status.running .status-dot {
  background: #67c23a;
  box-shadow: 0 0 8px rgba(103, 194, 58, 0.5);
}

.service-status.stopped .status-dot {
  background: #f56c6c;
}

.service-details {
  flex: 1;
}

.service-name {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin-bottom: 2px;
}

.service-description {
  font-size: 12px;
  color: #666;
}

.service-metrics {
  display: flex;
  gap: 16px;
}

.metric-item {
  text-align: center;
}

.metric-label {
  font-size: 10px;
  color: #999;
  display: block;
  margin-bottom: 2px;
}

.metric-value {
  font-size: 12px;
  font-weight: 600;
  color: #333;
}

/* 系统信息 */
.system-info-section {
  margin-bottom: 24px;
}

.system-info-card {
  border-radius: 16px;
  border: none;
  box-shadow: 
    0 8px 32px rgba(0,0,0,0.08),
    0 2px 8px rgba(0,0,0,0.04);
  background: linear-gradient(135deg, #fff 0%, #fafbfc 100%);
}

.info-category {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 20px;
  height: 100%;
}

.category-title {
  font-size: 16px;
  font-weight: 700;
  color: #333;
  margin: 0 0 16px 0;
  padding-bottom: 8px;
  border-bottom: 2px solid #e4e7ed;
}

.info-items {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #f0f2f5;
}

.info-item:last-child {
  border-bottom: none;
}

.info-label {
  font-size: 13px;
  color: #666;
  font-weight: 500;
}

.info-value {
  font-size: 13px;
  color: #333;
  font-weight: 600;
  text-align: right;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .monitor-page {
    padding: 16px;
  }
  
  .dashboard-section .el-col:first-child {
    margin-bottom: 20px;
  }
  
  .alerts-section .el-col:first-child {
    margin-bottom: 20px;
  }
}

@media (max-width: 768px) {
  .monitor-page {
    padding: 12px;
  }
  
  .status-content {
    padding: 16px;
    gap: 12px;
  }
  
  .card-header {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }
  
  .header-right {
    width: 100%;
    justify-content: space-between;
  }
  
  .service-metrics {
    flex-direction: column;
    gap: 8px;
  }
  
  .system-info-content .el-col {
    margin-bottom: 20px;
  }
}

/* 滚动条样式 */
.alerts-list::-webkit-scrollbar,
.services-list::-webkit-scrollbar {
  width: 4px;
}

.alerts-list::-webkit-scrollbar-track,
.services-list::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 2px;
}

.alerts-list::-webkit-scrollbar-thumb,
.services-list::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 2px;
}

.alerts-list::-webkit-scrollbar-thumb:hover,
.services-list::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}
</style>
